<template>
  <div class="date-box clearfix">
    <div :class="{'need-fix':isfix}" class="query-date" >
      <ul class="clearfix">
        <li v-for ="(item, index) in times" :class="{'active_color':index==num}" :key="item.id" @click="queryData(index)">
          <p/>
          <p>{{ item.name }}</p>
        </li>
        <!-- <li
          :class="{'active_color': index==0}"
          @click="queryData(0)">
          <p/>
          <p>{{ date1 }}</p>
        </li>
        <li
          :class="{'active_color': index==1}"
          @click="queryData(1)">
          <p/>
          <p>近7天</p>
        </li>
        <li
          :class="{'active_color': index==2}"
          @click="queryData(2)">
          <p/>
          <p>近30天</p>
        </li>
        <li
          :class="{'active_color': index==3}"
          @click="queryData(3)">
          <p/>
          <p>近90天</p>
        </li> -->
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    date1: {
      type: String,
      default: ''
    },
    nums: {
      type: String,
      default: ''
    },
    isfix: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      num: 0,
      title: '',
      times: [
        {name: '昨日'},
        {name: '近7天'},
        {name: '近30天'},
        {name: '近90天'}
      ]

    }
  },
  methods: {
    queryData (num) {
      this.num = num
      this.$emit('queryTimeData', num)
    },
    changeNumVal (nums) {
      this.index = nums
    }
  }
}

</script>
<style lang="scss" scoped>
// .date-box {
//   margin: .50rem auto;
//   height: .2rem;
// }
.need-fix{
  position: fixed;
  top: 1.7rem;
  right: 1%;
  background: #0e0a2e;
}
.query-date {
    width: 82%;
    z-index: 20;
    padding-left: 16%;

  ul {
    display: flex;
    display: -webkit-flex;
    li {
      display: flex;
      display: -webkit-flex;
      flex: 1;

      p {
        line-height: .60rem;
      }
      p:nth-child(1) {
        width: .25rem;
        height: .20rem;
        margin-top: .17rem;
        margin-right: .10rem;
        background: rgba(174, 174, 174, 0.5);
      }
      p:nth-child(2) {
        flex: 1;
      }
      &.active_color {
        p:nth-child(1) {
          background: #ED7D31;
        }
      }
    }
  }
}

</style>
